<template>
	<view class="help-coupon">
		<view class="wid92">
			<view class="flex ">

				<view :class="item.dictValue==active?'active lx':'lx'" v-for="(item,index) in typeData" :key="index"
					@click="handleSwitch(item)">
					{{item.dictLabel}}
				</view>
			</view>
			<!-- <view class="flex marT26">
				<view :class="item.value==expireActive?'expireActive expireLx':'expireLx'"
					v-for="(item,index) in expireData" :key="index" @click="handleExpireSwitch(item)">
					{{item.label}}
				</view>
			</view> -->

			<view class="box" v-if="list.length>0">
				<view class="box-yhj flx2" v-for="(item,index) in list" :key="index" :style="{background: 'url(' + imgUrl + '/static/images/优惠券框.png)', backgroundSize: '100% 100%'}">
					<view class="box-yhj-left">
						<view class="title">
							{{item.couponName}}
						</view>
						<view class="time" v-if="item.useEndTime">
							{{item.useEndTime}}到期
						</view>
					</view>
					<view class="box-yhj-right flx4">
						<view class="price">
							<text>￥</text> {{item.couponMoney}}
						</view>
						<!-- <view class="button">
							去使用
						</view> -->
					</view>
				</view>
			</view>
			<u-empty :icon-size="160" font-size="36" v-else text="暂无数据"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getCouponGet,
		getDicts
	} from '@/api/home.js'
	// import {
	// 	getDicts,
	// 	listData
	// } from '@/api/system/dict/data.js'
	export default {
		data() {
			return {
				active: "",
				typeData: [{
						value: "1",
						label: "已领取"
					},
					{
						value: "2",
						label: "已使用"
					},
					{
						value: "3",
						label: "已失效"
					},
					// {
					// 	value: "4",
					// 	label: "待激活"
					// },

				],
				expireActive: "1",
				expireData: [{
						value: "1",
						label: "全部",
					},
					{
						value: "2",
						label: "快过期",
					}
				],
				list: [{
						title: "【某某某某某活动】满10减5元 优惠券",
						time: "2025-09-07 23:59:59",
						price: "5.00",
						status: "1",
					},
					{
						title: "【某某某某某活动】满10减5元 优惠券",
						time: "2025-09-07 23:59:59",
						price: "5.00",
						status: "2",
					},
					{
						title: "【某某某某某活动】满10减5元 优惠券",
						time: "2025-09-07 23:59:59",
						price: "5.00",
						status: "3",
					},
					{
						title: "【某某某某某活动】满10减5元 优惠券",
						time: "2025-09-07 23:59:59",
						price: "5.00",
						status: "1",
					},
					{
						title: "【某某某某某活动】满10减5元 优惠券",
						time: "2025-09-07 23:59:59",
						price: "5.00",
						status: "1",
					},
					{
						title: "【某某某某某活动】满10减5元 优惠券",
						time: "2025-09-07 23:59:59",
						price: "5.00",
						status: "1",
					},
				],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userId: JSON.parse(uni.getStorageSync("userInfo")).userId,
					status: "",

				},
				total:0
			}
		},
		computed:{
			imgUrl(){
				return this.$imgUrl
			}
		},
		async created() {
			// activity_use_status0


			this.list = []
			this.getDic()
			await this.getList()
		},
		onPullDownRefresh() {
			// 下拉刷新时重置数据
			this.queryParams.pageNum = 1;
			this.list = []
			this.getList()

		},
		onReachBottom() {

			if (this.queryParams.pageNum * this.queryParams.pageSize < this.total) {
				this.queryParams.pageNum++
				this.getList()
			}
		},
		methods: {
			getDic() {
				getDicts('activity_use_status').then(res => {
					console.log(res, '字典');
					let newObj = {
						dictValue: "",
						dictLabel: "全部"
					}
					res.data.unshift(newObj)
					this.typeData = res.data
				})
				// let obj = {
				// 	dictType: 'activity_use_status'
				// }
				// listData(obj).then(res => {
				// 	console.log(res, '字典');
				// })
			},
			handleSwitch(item) {
				this.active = item.dictValue
				this.queryParams.status = this.active
				this.queryParams.pageNum = 1;
				this.list = []
				this.getList()
			},
			handleExpireSwitch(item) {
				this.expireActive = item.value
			},
			// 查询列表
			getList() {
				getCouponGet(this.queryParams).then(res => {
					console.log(res, '数据');
					res.rows.forEach(item => {

						this.list.push(item)
					})
					this.total = res.total
					uni.stopPullDownRefresh(); // 停止下拉刷新动画
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.help-coupon {
		.wid92 {
			width: 92%;
			margin: 40rpx auto 0;

			.marT26 {
				margin-top: 26rpx;
			}

			.lx {
				font-weight: 400;
				font-size: 16px;
				color: #3D3D3D;
				margin-right: 40rpx;
			}

			.active {
				color: #00ABA9;
			}

			.expireLx {
				background: #FFFFFF;
				border-radius: 30px 30px 30px 30px;
				font-weight: 400;
				font-size: 14px;
				color: #9EA6A7;
				padding: 6px 40rpx;
				margin-right: 20rpx;
			}

			.expireActive {
				background: #F0FFF8;
				color: #00ABA9;
			}

			.box {
				background: #FFFFFF;
				border-radius: 10px 10px 10px 10px;
				padding: 20rpx;
				margin-top: 32rpx;

				.box-yhj {
					width: 100%;
					margin-bottom: 14px;
					height: 100px;
					overflow: hidden;

					.box-yhj-left {
						margin: 17px 0 21px 12px;
						width: 180px;

						.title {
							font-weight: 400;
							font-size: 14px;
							line-height: 20px;
							color: #333333;
							width: 180px;
						}

						.time {
							font-weight: 400;
							font-size: 12px;
							color: #999999;
							margin-top: 6px;
						}
					}

					.box-yhj-right {
						margin-right: 20px;

						.price {
							font-weight: 500;
							font-size: 30px;
							color: #F43838;
							line-height: 40px;
							margin-top: 12px;

							text {
								font-weight: 400;
								font-size: 14px;
							}
						}

						.button {
							background: linear-gradient(125deg, #24F1B0 1%, #00C8CE 100%), #D8D8D8;
							border-radius: 20px 20px 20px 20px;
							font-weight: 400;
							font-size: 14px;
							color: #FFFFFF;
							padding: 6px 14px;
						}
					}
				}
			}
		}
	}
</style>
